<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            ul,
            ol,
            li {
                list-style: none;
            }

            .box {
                width: 600px;
                height: 400px;
                margin: 30px auto;
                border: 10px solid pink;
                display: flex;
                flex-direction: column;
            }

            ul {
                height: 45px;
                display: flex;
            }

            ul > li {
                flex: 1;
                display: flex;
                justify-content: center;
                align-items: center;
                color: #fff;
                background-color: skyblue;
                font-size: 30px;
            }

            ul > li.active {
                background-color: orange;
            }

            ol {
                flex: 1;
                position: relative;
            }

            ol > li {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: purple;
                color: #fff;
                font-size: 100px;

                display: none;
            }

            ol > li.active {
                display: flex;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <ul>
                <li class="active">1</li>
                <li>2</li>
                <li>3</li>
            </ul>
            <ol>
                <li class="active">1</li>
                <li>2</li>
                <li>3</li>
            </ol>
        </div>

        <script src="./jquery/jquery-3.6.0.min.js"></script>

        <!-- <script>
            const tabs = document.querySelectorAll("ul>li")
            const contents = document.querySelectorAll("ol>li")

            for(var i = 0; i < tabs.length; i++){
                tabs[i].setAttribute("index",i)

                tabs[i].onclick = function(e){
                    console.log(i);

                    tabs.forEach(t=>t.classList.remove("active"))
                    this.classList.add("active")

                    contents.forEach(c=>c.classList.remove("active"))
                    // for(var j = 0; j < contents.length; j++){
                    //     if(j===i){
                    //         contents[j].classList.add("active")
                    //     }
                    // }
                    contents[this.getAttribute("index")].classList.add("active")
                }
                
            }
        </script> -->

        <script>
            $("ul>li").click(function(e){
                // console.log($(this),$(this).index());
                
                $(this)
                .addClass("active")

                .siblings()
                .removeClass("active")

                .parent()
                .next()
                .find("li")
                .eq($(this).index())
                .addClass("active")

                .siblings()
                .removeClass("active")
            })
        </script>
    </body>
</html>
